
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<!--<%-->
<!--String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;-->
<!--%>-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>JPetstore管理系统 | Login</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
<!--    <link rel="shortcut icon" href="../admin/dist/img/favicon.ico"/>-->
    <!-- Font Awesome -->
    <link rel="stylesheet" href="../admin/dist/css/font-awesome.min.css">
    <!-- Ionicons -->
    <link rel="stylesheet" href="../admin/dist/css/ionicons.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../admin/dist/css/adminlte.min.css">
    <script src="../js/jquery-3.3.1.js"/>
    <!--引入layui的css-->
    <link rel="stylesheet" href="../layui-v2.6.8/layui/css/layui.css">
    <!--引入layui的js-->
    <script type="text/javascript" src="../layui-v2.6.8/layui/layui.js"></script>

    <!--    鼠标跟随特效-->
    <link rel="stylesheet" type="text/css" href="../css/dmaku.css" />
    <script type="text/javascript" src="../js/dmaku.js"></script>
    <style>
        canvas {
            display: block;
            vertical-align: bottom;
        }
        #particles {
            background-color: #F7FAFC;
            position: absolute;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }
    </style>
<!--    发送验证码-->
    <script>
        function getBasePath(){
            return '<%=basePath%>';
        }
    </script>

</head>
<body class="hold-transition login-page">
<div id="particles">
</div>

<div class="login-box">
    <div class="login-logo" style="color: #1baeae;">
        <div><img src="../admin/dist/img/logo-topbar.gif"
                  style="height: 70px;width: 370px;float: left;margin-left:30px"></div>
        <div>管理系统登录</div>

    </div>
    <!-- /.login-logo -->
    <div class="card">
        <div class="card-body login-card-body">

            <form action="signonCheck" method="post">
<!--                <div th:if="${not #strings.isEmpty(session.errorMsg)}" class="form-group">-->
<!--                    <div class="alert alert-danger" th:text="${session.errorMsg}"></div>-->
<!--                </div>-->
                <div   class="form-group">
                    <div class="alert alert-danger" style="background-color: #b9dec9;">请登录</div>
                </div>
                <div class="form-group has-feedback">
<!--                    <span class="fa fa-user form-control-feedback"></span>-->
                    <span><img src="../admin/dist/img/1.png"/></span>
                    <input type="text" id="userName" name="username" class="form-control" placeholder="请输入账号"
                           required="false">
                </div>
                <div class="form-group has-feedback">
<!--                    <span class="fa fa-lock form-control-feedback"></span>-->
                    <span><img src="../admin/dist/img/2.png"/></span>
                    <input type="password" id="password" name="password" class="form-control" placeholder="请输入密码"
                           required="false">
                </div>
                    <div class="form-group has-feedback">
                        <!--                    <span class="fa fa-lock form-control-feedback"></span>-->
                        <span><img src="../img/5.png"/></span>
                        <input type="text" id="memPhone" name="memPhone" class="form-control" placeholder="请输入手机号"
                               required="false">
                    </div>
                    <div class="row">
                        <div class="col-6">
                            <input type="text"style="width:140px;height:38px;" id="vCode" name="vCode"  placeholder="  请输入验证码" required="false">
                        </div>
                        <div class="col-6" id="sendcode">
                             <button type="button"  id="sendBtn" src="/houtai/verificationCode" class=" btn btn-primary btn-block btn-flat" style="background-color:#b9dec9;border-color:#b9dec9;">
                                发送验证码
                            </button>
                        </div>
                    </div>
                <div class="form-group has-feedback"></div>
                <div class="row">
                    <div class="col-8">
                        <font color="red" style="margin-left: 3px" th:text="${message}">message</font>
                    </div>
                    <div class="col-4">
                        <button type="submit"class=" btn btn-primary btn-block btn-flat" style="background-color:#b9dec9;border-color:#b9dec9;">
                            登录
                        </button>
                    </div>
                </div>

            </form>

        </div>
        <!-- /.login-card-body -->
    </div>
</div>

<script>
    $('#sendcode').on('click','#sendBtn',function (){
        console.log(11);
        var memPhone = $("#memPhone").val();
        if(memPhone == '' || memPhone.length != 11){
            alert("请输入正确的手机号！");
            return;
        }else{
            $.ajax({
                type: 'get',
                url: '/sendCode',
                data: {
                    memPhone : memPhone,
                },
                dataType: 'json',
                success: function(data) {
                    if(data){
                        timer();
                    }else{
                        layer.msg("获取验证码失败");
                    }
                },
                error: function(data) {
                    layer.msg('连接超时！');
                },
            });
        }
    })

    var wait = 60;
    //倒计时
    function timer() {
        if(wait == 0){
            $("#sendBtn").val("获取验证码");
            $("#sendBtn").removeAttr("disabled");
            $("#sendBtn").css("border-color","1e9fff").css("background", "#ffffff").css("cursor", "pointer");
            wait = 60;
        }else{
            $("#sendBtn").attr("disabled","true");
            $("#sendBtn").css("border-color","fbfbfb").css("background", "#ccc").css("cursor", "not-allowed");
            $("#sendBtn").val(wait + "秒后重发");
            wait--;
            setTimeout(function() {timer()}, 1000);
        }
    }

</script>

<!-- /.login-box -->

<!-- jQuery -->
<script src="../admin/plugins/jquery/jquery.min.js"></script>
<!--雪花飘落特效-->
<script type="text/javascript">
    (function($){
        $.fn.snow = function(options){
            var $flake = $('<div id="snowbox" />').css({'position': 'absolute','z-index':'9999', 'top': '-50px'}).html('&#10052;'),
                documentHeight = $(document).height(),
                documentWidth = $(document).width(),
                defaults = {
                    minSize : 5,
                    maxSize : 25,
                    newOn : 500,
                    flakeColor : getRandomColor() /* 此处可以定义雪花颜色，若要白色可以改为#FFFFFF */
                },
                options = $.extend({}, defaults, options);
            var interval= setInterval( function(){
                var startPositionLeft = Math.random() * documentWidth - 100,
                    startOpacity = 0.5 + Math.random(),
                    sizeFlake = options.minSize + Math.random() * options.maxSize,
                    endPositionTop = documentHeight - 200,
                    endPositionLeft = startPositionLeft - 500 + Math.random() * 500,
                    durationFall = documentHeight * 10 + Math.random() * 5000;
                $flake.clone().appendTo('body').css({
                    left: startPositionLeft,
                    opacity: startOpacity,
                    'font-size': sizeFlake,
                    color: getRandomColor()
                }).animate({
                    top: endPositionTop,
                    left: endPositionLeft,
                    opacity: 0.2
                },durationFall,'linear',function(){
                    $(this).remove()
                });
            }, options.newOn);
        };
    })(jQuery);
    $(function(){
        $.fn.snow({
            minSize: 5, /* 定义雪花最小尺寸 */
            maxSize: 50,/* 定义雪花最大尺寸 */
            newOn: 200 /* 定义密集程度，数字越小越密集 */
        });
    });
    var getRandomColor = function(){
        return '#'+Math.floor(Math.random()*16777215).toString(16);
    }
</script>

<!--点击爱心特效-->
<script type="text/javascript">
    //需要jquery插件
    /* 鼠标特效 */
    var a_idx = 0;
    jQuery(document).ready(function($) {
        $("body").click(function(e) {
            var a = new Array("❤不做咸鱼！❤","❤拒绝懒惰！❤","❤想做吃货❤","❤向大佬学习❤","❤扶我起来~❤","❤come on❤","❤一直在路上~❤","❤累了~❤","❤再趴一会❤","❤66666❤","❤高兴的飞起*****❤");
            var $i = $("<span></span>").text(a[a_idx]);
            a_idx = (a_idx + 1) % a.length;
            var x = e.pageX,
                y = e.pageY;
            $i.css({
                "z-index": 999999999999999999999999999999999999999999999999999999999999999999999,
                "top": y - 20,
                "left": x,
                "position": "absolute",
                "font-weight": "bold",
                "color": "rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"
            });
            $("body").append($i);
            $i.animate({
                    "top": y - 180,
                    "opacity": 0
                },
                1500,
                function() {
                    $i.remove();
                });
        });
    });
</script>
<!-- Bootstrap 4 -->
<script src="../admin/plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="../admin/dist/js/plugins/particles.js"></script>
<script src="../admin/dist/js/plugins/login-bg-particles.js"></script>
</body>
</html>
